<!--生产入库-->
<template>
  <div class="production-warehousing-container">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-item">
        <label>关键词</label>
        <input 
          type="text" 
          v-model="searchForm.keyword" 
          placeholder="请输入入库单号或工单编号"
          @keyup.enter="handleSearch"
        >
      </div>
      <div class="filter-item">
        <label>入库状态</label>
        <select v-model="searchForm.warehousingStatus">
          <option value="">全部</option>
          <option value="0">待入库</option>
          <option value="1">部分入库</option>
          <option value="2">全部入库</option>
        </select>
      </div>
      <div class="filter-item">
        <label>入库时间</label>
        <input 
          type="date" 
          v-model="searchForm.startTime" 
          placeholder="开始时间"
        >
        <span style="margin: 0 8px;">至</span>
        <input 
          type="date" 
          v-model="searchForm.endTime" 
          placeholder="结束时间"
        >
      </div>
      <div class="filter-buttons">
        <button class="btn-primary" @click="handleSearch">搜索</button>
        <button class="btn-secondary" @click="handleReset">重置</button>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="btn-primary" @click="handleAdd">新建入库</button>
      <button class="btn-secondary" @click="handleBatchDelete" :disabled="selectedItems.length === 0">批量删除</button>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>入库单号</th>
            <th>入库状态</th>
            <th>入库时间</th>
            <th>关联工单号</th>
            <th>入库仓库</th>
            <th>入库数量</th>
            <th>入库人</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in warehousingList" :key="item.id || index" v-show="warehousingList.length > 0">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td>{{ item.warehousingNo || item.warehousingId }}</td>
            <td><span :class="statusClass(item.warehousingStatus || item.status)">{{ getStatusText(item.warehousingStatus || item.status) }}</span></td>
            <td>{{ formatDate(item.warehousingTime || item.time) }}</td>
            <td>
              {{ item.workOrderName }}
              <span class="work-order-code">{{ item.workOrderNo || item.workOrderCode }}</span>
            </td>
            <td>{{ item.warehouseName || item.warehouse }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.operatorName || item.operator }}</td>
            <td>{{ item.remark || '-' }}</td>
            <td class="action-column">
              <button class="btn-text" @click="handleView(item)">查看</button>
              <button class="btn-text" @click="handleEdit(item)">编辑</button>
              <button class="btn-text text-danger" @click="handleDelete(item)">删除</button>
            </td>
          </tr>
          <tr v-show="warehousingList.length === 0 && !loading">
            <td colspan="10" class="no-data">暂无数据</td>
          </tr>
          <tr v-show="loading">
            <td colspan="10" class="loading">加载中...</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary" @click="handleExport" :disabled="selectedItems.length === 0">导出</button>
      </div>
      <div class="pagination">
        <button @click="handlePageChange(pagination.current - 1)" :disabled="pagination.current <= 1">&lt;</button>
        <button 
          v-for="page in getPageNumbers()" 
          :key="page" 
          :class="{ active: page === pagination.current }"
          @click="handlePageChange(page)"
        >
          {{ page }}
        </button>
        <button @click="handlePageChange(pagination.current + 1)" :disabled="pagination.current >= pagination.pages">&gt;</button>
        <select v-model="pagination.size" @change="handleSizeChange">
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
        </select>
        <span class="pagination-info">
          共 {{ pagination.total }} 条记录，第 {{ pagination.current }}/{{ pagination.pages }} 页
        </span>
      </div>
    </div>

    <!-- 新建/编辑弹窗 -->
    <div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ isEdit ? '编辑入库记录' : '新建入库记录' }}</h3>
          <button class="close-btn" @click="closeDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <div v-if="submitting && isEdit" class="loading-overlay">
            <div class="loading-content">
              <div class="loading-spinner"></div>
              <p>正在加载数据...</p>
            </div>
          </div>
          <form @submit.prevent="handleSubmit" :class="{ 'form-loading': submitting && isEdit }">
            <div class="form-row">
              <div class="form-item">
                <label>关联工单 <span class="required">*</span></label>
                <select v-model="formData.workOrderId" required :disabled="submitting && isEdit">
                  <option value="">{{ workOrderList.length === 0 ? '加载中...' : '请选择工单' }}</option>
                  <option v-for="order in workOrderList" :key="order.id" :value="order.id">
                    {{ order.workOrderName }} ({{ order.workOrderNo }})
                  </option>
                </select>
              </div>
              <div class="form-item">
                <label>入库仓库 <span class="required">*</span></label>
                <select v-model="formData.warehouseId" required :disabled="submitting && isEdit">
                  <option value="">{{ warehouseList.length === 0 ? '加载中...' : '请选择仓库' }}</option>
                  <option v-for="warehouse in warehouseList" :key="warehouse.id" :value="warehouse.id">
                    {{ warehouse.warehouseName }}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>入库数量 <span class="required">*</span></label>
                <input 
                  type="number" 
                  v-model="formData.quantity" 
                  min="1" 
                  step="1" 
                  required 
                  placeholder="请输入入库数量"
                >
              </div>
              <div class="form-item">
                <label>入库状态</label>
                <select v-model="formData.warehousingStatus">
                  <option value="0">待入库</option>
                  <option value="1">部分入库</option>
                  <option value="2">全部入库</option>
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-item">
                <label>入库人 <span class="required">*</span></label>
                <select v-model="formData.uId" required :disabled="submitting && isEdit">
                  <option value="">{{ userList.length === 0 ? '加载中...' : '请选择入库人' }}</option>
                  <option v-for="user in userList" :key="user.id" :value="user.id">
                    {{ user.username || user.name || user.realName }}
                  </option>
                </select>
              </div>
              <div class="form-item">
                <!-- 占位，保持布局对称 -->
              </div>
            </div>
            <div class="form-row">
              <div class="form-item full-width">
                <label>备注</label>
                <textarea 
                  v-model="formData.remark" 
                  rows="3" 
                  placeholder="请输入备注信息"
                ></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button type="button" class="btn-secondary" @click="closeDialog">取消</button>
          <button type="button" class="btn-primary" @click="handleSubmit" :disabled="submitting">
            {{ submitting ? '提交中...' : '确定' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="closeDetailDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>入库记录详情</h3>
          <button class="close-btn" @click="closeDetailDialog">&times;</button>
        </div>
        <div class="dialog-body">
          <div class="detail-content" v-if="currentDetail">
            <div class="detail-row">
              <div class="detail-item">
                <label>入库单号：</label>
                <span>{{ currentDetail.warehousingNo }}</span>
              </div>
              <div class="detail-item">
                <label>入库状态：</label>
                <span :class="statusClass(currentDetail.warehousingStatus)">
                  {{ getStatusText(currentDetail.warehousingStatus) }}
                </span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>关联工单：</label>
                <span>{{ currentDetail.workOrderName }} ({{ currentDetail.workOrderNo }})</span>
              </div>
              <div class="detail-item">
                <label>入库仓库：</label>
                <span>{{ currentDetail.warehouseName }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>入库数量：</label>
                <span>{{ currentDetail.quantity }}</span>
              </div>
              <div class="detail-item">
                <label>入库时间：</label>
                <span>{{ formatDate(currentDetail.warehousingTime) }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item">
                <label>入库人：</label>
                <span>{{ currentDetail.operatorName }}</span>
              </div>
              <div class="detail-item">
                <label>创建时间：</label>
                <span>{{ formatDate(currentDetail.createTime) }}</span>
              </div>
            </div>
            <div class="detail-row">
              <div class="detail-item full-width">
                <label>备注：</label>
                <span>{{ currentDetail.remark || '无' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button type="button" class="btn-secondary" @click="closeDetailDialog">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getProductionWarehousingPage, 
  getProductionWarehousingById,
  addProductionWarehousing, 
  updateProductionWarehousing, 
  deleteProductionWarehousing 
} from '@/api/productionWarehousing.js'
import { warehouseApi } from '@/api/warehouse.js'
import { productionWorkOrdersApi } from '@/api/productionWorkOrders.js'
import http from '@/api/http.js'

export default {
  name: 'ProductionWarehousing',
  data() {
    return {
      // 列表数据
      warehousingList: [],
      loading: false,
      
      // 搜索表单
      searchForm: {
        keyword: '',
        warehousingStatus: '',
        startTime: '',
        endTime: ''
      },
      
      // 分页信息
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      },
      
      // 弹窗相关
      showDialog: false,
      showDetailDialog: false,
      isEdit: false,
      submitting: false,
      
      // 表单数据
      formData: {
        id: null,
        workOrderId: '',
        warehouseId: '',
        quantity: '',
        warehousingStatus: '2', // 默认全部入库
        uId: '', // 入库人ID
        remark: ''
      },
      
      // 详情数据
      currentDetail: null,
      
      // 下拉选项数据
      workOrderList: [],
      warehouseList: [],
      userList: [], // 用户列表
      
      // 状态映射
      statusMap: {
        0: '待入库',
        1: '部分入库', 
        2: '全部入库'
      }
    };
  },
  
  computed: {
    allSelected: {
      get() {
        return this.warehousingList.length > 0 && this.warehousingList.every(item => item.selected);
      },
      set(value) {
        this.warehousingList.forEach(item => {
          item.selected = value;
        });
      },
    },
    
    selectedItems() {
      return this.warehousingList.filter(item => item.selected);
    }
  },
  
  mounted() {
    this.loadData();
    this.loadWorkOrders();
    this.loadWarehouses();
    this.loadUsers();
  },
  
  methods: {
    // 加载入库记录列表
    async loadData() {
      this.loading = true;
      try {
        const params = {
          current: this.pagination.current,
          size: this.pagination.size,
          warehousingNo: this.searchForm.keyword,
          workOrderNo: this.searchForm.keyword,
          warehousingStatus: this.searchForm.warehousingStatus || undefined,
          startTime: this.searchForm.startTime ? this.searchForm.startTime + ' 00:00:00' : undefined,
          endTime: this.searchForm.endTime ? this.searchForm.endTime + ' 23:59:59' : undefined
        };
        
        const response = await getProductionWarehousingPage(params);
        const { records, current, size, total, pages } = response.data.data;
        
        this.warehousingList = records.map(item => ({
          ...item,
          selected: false
        }));
        
        this.pagination = {
          current,
          size,
          total,
          pages
        };
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message?.error('加载数据失败');
      } finally {
        this.loading = false;
      }
    },
    
    // 加载工单列表
    async loadWorkOrders() {
      try {
        const response = await productionWorkOrdersApi.getPage({ current: 1, size: 1000 });
        this.workOrderList = response.data.data.records || [];
        console.log('工单API响应:', response.data);
        console.log('工单列表数据:', this.workOrderList);
      } catch (error) {
        console.error('加载工单列表失败:', error);
      }
    },
    
    // 加载仓库列表
    async loadWarehouses() {
      try {
        const response = await warehouseApi.page({ current: 1, size: 1000 });
        this.warehouseList = response.data.data.records || [];
        console.log('仓库API响应:', response.data);
        console.log('仓库列表数据:', this.warehouseList);
      } catch (error) {
        console.error('加载仓库列表失败:', error);
      }
    },
    
    // 加载用户列表
    async loadUsers() {
      try {
        // 尝试多个可能的用户API路径
        let response;
        try {
          response = await http.get('/settings/user/page', { params: { current: 1, size: 1000 } });
        } catch (e) {
          try {
            response = await http.get('/system/user/page', { params: { current: 1, size: 1000 } });
          } catch (e2) {
            try {
              response = await http.get('/user/page', { params: { current: 1, size: 1000 } });
            } catch (e3) {
              // 如果都失败，使用静态数据作为后备
              this.userList = [
                { id: 1, username: '胡歌', name: '胡歌', realName: '胡歌' },
                { id: 2, username: '内马尔', name: '内马尔', realName: '内马尔' },
                { id: 3, username: '库里', name: '库里', realName: '库里' },
                { id: 4, username: '詹姆斯', name: '詹姆斯', realName: '詹姆斯' },
                { id: 5, username: '皮特', name: '皮特', realName: '皮特' }
              ];
              console.log('使用静态用户数据:', this.userList);
              return;
            }
          }
        }
        
        this.userList = response.data.data.records || response.data.data || [];
        console.log('用户API响应:', response.data);
        console.log('用户列表数据:', this.userList);
      } catch (error) {
        console.error('加载用户列表失败:', error);
        // 使用静态数据作为后备
        this.userList = [
          { id: 1, username: '胡歌', name: '胡歌', realName: '胡歌' },
          { id: 2, username: '内马尔', name: '内马尔', realName: '内马尔' },
          { id: 3, username: '库里', name: '库里', realName: '库里' },
          { id: 4, username: '詹姆斯', name: '詹姆斯', realName: '詹姆斯' },
          { id: 5, username: '皮特', name: '皮特', realName: '皮特' }
        ];
      }
    },
    
    // 搜索
    handleSearch() {
      this.pagination.current = 1;
      this.loadData();
    },
    
    // 重置搜索
    handleReset() {
      this.searchForm = {
        keyword: '',
        warehousingStatus: '',
        startTime: '',
        endTime: ''
      };
      this.pagination.current = 1;
      this.loadData();
    },
    
    // 新建
    handleAdd() {
      this.isEdit = false;
      this.formData = {
        id: null,
        workOrderId: '',
        warehouseId: '',
        quantity: '',
        warehousingStatus: '2',
        uId: '',
        remark: ''
      };
      this.showDialog = true;
    },
    
    // 编辑
    async handleEdit(item) {
      try {
        this.isEdit = true;
        
        // 显示加载状态
        this.showDialog = true;
        this.submitting = true;
        
        console.log('编辑项目数据:', item);
        
        // 确保工单、仓库和用户选项已加载
        if (this.workOrderList.length === 0) {
          await this.loadWorkOrders();
        }
        if (this.warehouseList.length === 0) {
          await this.loadWarehouses();
        }
        if (this.userList.length === 0) {
          await this.loadUsers();
        }
        
        // 先获取完整的详情数据以确保所有字段都有值
        const response = await getProductionWarehousingById(item.id);
        const detail = response.data.data;
        
        console.log('详情数据:', detail);
        console.log('工单列表:', this.workOrderList);
        console.log('仓库列表:', this.warehouseList);
        
        // 使用详情数据进行回显，确保所有必要字段都有值
        this.formData = {
          id: detail.id,
          workOrderId: detail.workOrderId || item.workOrderId || '',
          warehouseId: detail.warehouseId || item.warehouseId || '',
          quantity: detail.quantity || item.quantity || '',
          warehousingStatus: String(detail.warehousingStatus ?? item.warehousingStatus ?? '2'),
          uId: detail.uId || item.uId || '',
          remark: detail.remark || item.remark || ''
        };
        
        console.log('表单数据:', this.formData);
        
      } catch (error) {
        console.error('获取编辑数据失败:', error);
        this.$message?.error('获取编辑数据失败，将使用列表数据');
        
        // 如果获取详情失败，则使用列表数据作为后备方案
        this.formData = {
          id: item.id,
          workOrderId: item.workOrderId || '',
          warehouseId: item.warehouseId || '',
          quantity: item.quantity || '',
          warehousingStatus: String(item.warehousingStatus ?? '2'),
          uId: item.uId || '',
          remark: item.remark || ''
        };
        
        console.log('后备表单数据:', this.formData);
      } finally {
        this.submitting = false;
      }
    },
    
    // 查看详情
    async handleView(item) {
      try {
        const response = await getProductionWarehousingById(item.id);
        this.currentDetail = response.data.data;
        this.showDetailDialog = true;
      } catch (error) {
        console.error('获取详情失败:', error);
        this.$message?.error('获取详情失败');
      }
    },
    
    // 删除单个
    async handleDelete(item) {
      if (!confirm('确定要删除这条入库记录吗？')) {
        return;
      }
      
      try {
        await deleteProductionWarehousing(item.id);
        this.$message?.success('删除成功');
        this.loadData();
      } catch (error) {
        console.error('删除失败:', error);
        this.$message?.error('删除失败');
      }
    },
    
    // 批量删除
    async handleBatchDelete() {
      const selectedIds = this.selectedItems.map(item => item.id);
      if (selectedIds.length === 0) {
        this.$message?.warning('请选择要删除的记录');
        return;
      }
      
      if (!confirm(`确定要删除选中的 ${selectedIds.length} 条记录吗？`)) {
        return;
      }
      
      try {
        // 逐个删除
        for (const id of selectedIds) {
          await deleteProductionWarehousing(id);
        }
        this.$message?.success('批量删除成功');
        this.loadData();
      } catch (error) {
        console.error('批量删除失败:', error);
        this.$message?.error('批量删除失败');
      }
    },
    
    // 提交表单
    async handleSubmit() {
      if (this.submitting) return;
      
      // 表单验证
      if (!this.formData.workOrderId) {
        this.$message?.error('请选择关联工单');
        return;
      }
      if (!this.formData.warehouseId) {
        this.$message?.error('请选择入库仓库');
        return;
      }
      if (!this.formData.quantity || this.formData.quantity <= 0) {
        this.$message?.error('请输入有效的入库数量');
        return;
      }
      if (!this.formData.uId) {
        this.$message?.error('请选择入库人');
        return;
      }
      
      this.submitting = true;
      try {
        const data = {
          ...this.formData,
          quantity: Number(this.formData.quantity),
          warehousingStatus: Number(this.formData.warehousingStatus)
        };
        
        if (this.isEdit) {
          await updateProductionWarehousing(data);
          this.$message?.success('修改成功');
        } else {
          await addProductionWarehousing(data);
          this.$message?.success('新建成功');
        }
        
        this.closeDialog();
        this.loadData();
      } catch (error) {
        console.error('提交失败:', error);
        this.$message?.error('提交失败');
      } finally {
        this.submitting = false;
      }
    },
    
    // 关闭弹窗
    closeDialog() {
      this.showDialog = false;
      this.formData = {
        id: null,
        workOrderId: '',
        warehouseId: '',
        quantity: '',
        warehousingStatus: '2',
        uId: '',
        remark: ''
      };
    },
    
    // 关闭详情弹窗
    closeDetailDialog() {
      this.showDetailDialog = false;
      this.currentDetail = null;
    },
    
    // 导出
    handleExport() {
      if (this.selectedItems.length === 0) {
        this.$message?.warning('请选择要导出的记录');
        return;
      }
      
      // 构建CSV内容
      const headers = ['入库单号', '入库状态', '入库时间', '关联工单', '入库仓库', '入库数量', '入库人', '备注'];
      const csvContent = [
        headers.join(','),
        ...this.selectedItems.map(item => [
          item.warehousingNo || '',
          this.getStatusText(item.warehousingStatus),
          this.formatDate(item.warehousingTime),
          `${item.workOrderName}(${item.workOrderNo})`,
          item.warehouseName || '',
          item.quantity || '',
          item.operatorName || '',
          (item.remark || '').replace(/,/g, '，') // 替换逗号避免CSV格式问题
        ].join(','))
      ].join('\n');
      
      // 下载文件
      const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `生产入库记录_${new Date().getTime()}.csv`;
      a.click();
      window.URL.revokeObjectURL(url);
      
      this.$message?.success('导出成功');
    },
    
    // 分页相关
    handlePageChange(page) {
      if (page < 1 || page > this.pagination.pages) return;
      this.pagination.current = page;
      this.loadData();
    },
    
    handleSizeChange() {
      this.pagination.current = 1;
      this.loadData();
    },
    
    getPageNumbers() {
      const { current, pages } = this.pagination;
      const numbers = [];
      
      if (pages <= 7) {
        for (let i = 1; i <= pages; i++) {
          numbers.push(i);
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            numbers.push(i);
          }
          numbers.push('...');
          numbers.push(pages);
        } else if (current >= pages - 3) {
          numbers.push(1);
          numbers.push('...');
          for (let i = pages - 4; i <= pages; i++) {
            numbers.push(i);
          }
        } else {
          numbers.push(1);
          numbers.push('...');
          for (let i = current - 1; i <= current + 1; i++) {
            numbers.push(i);
          }
          numbers.push('...');
          numbers.push(pages);
        }
      }
      
      return numbers.filter(n => n !== '...' || numbers.indexOf(n) === numbers.lastIndexOf(n));
    },
    
    // 工具方法
    statusClass(status) {
      const statusNum = typeof status === 'string' ? parseInt(status) : status;
      switch (statusNum) {
        case 0: return 'status-pending';
        case 1: return 'status-partial';
        case 2: return 'status-full';
        default: return '';
      }
    },
    
    getStatusText(status) {
      const statusNum = typeof status === 'string' ? parseInt(status) : status;
      return this.statusMap[statusNum] || '未知状态';
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return dateStr;
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  }
};
</script>

<style scoped>
.production-warehousing-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.filter-section {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
}

.filter-item input,
.filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 200px;
}

.filter-buttons {
  margin-left: auto;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.action-buttons {
  margin-bottom: 20px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.work-order-code {
  color: #909399;
  font-size: 12px;
  display: block;
}

.status-pending {
  color: #e6a23c;
}

.status-partial {
  color: #409eff;
}

.status-full {
  color: #67c23a;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
  margin-left: 16px;
}

.action-column {
  width: 150px;
}

.btn-text {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
}

.btn-text:hover {
  color: #66b1ff;
}

.text-danger {
  color: #f56c6c !important;
}

.text-danger:hover {
  color: #f78989 !important;
}

.no-data, .loading {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 加载状态样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-content {
  text-align: center;
  color: #606266;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.form-loading {
  opacity: 0.6;
  pointer-events: none;
}

.dialog-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #909399;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #606266;
}

.dialog-body {
  padding: 20px;
  position: relative;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

/* 表单样式 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item.full-width {
  flex: 100%;
}

.form-item label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.required {
  color: #f56c6c;
}

.form-item input,
.form-item select,
.form-item textarea {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
  outline: none;
  border-color: #409eff;
}

.form-item textarea {
  resize: vertical;
  min-height: 80px;
}

/* 详情样式 */
.detail-content {
  font-size: 14px;
}

.detail-row {
  display: flex;
  gap: 40px;
  margin-bottom: 16px;
}

.detail-item {
  flex: 1;
  display: flex;
  gap: 8px;
}

.detail-item.full-width {
  flex: 100%;
}

.detail-item label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
}

.detail-item span {
  color: #303133;
}

/* 筛选区域增强 */
.filter-item input[type="date"] {
  width: 150px;
}

/* 响应式 */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-buttons {
    margin-left: 0;
  }
  
  .form-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .dialog-content {
    width: 95%;
    margin: 10px;
  }
  
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .pagination-info {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}
</style>
